import React from 'react';
import { Card, Descriptions, Image, Tag, Divider } from 'antd';
import { useParams } from 'react-router-dom';
import './styles.css';

interface ProductDetail {
  id: string;
  areaCode: string;
  userId: string;
  productName: string;
  mainImage: string;
  price: number;
  orderCount: number;
  productDescription: string;
  productType: string;
  productCategory: string;
  industryCategory: string;
  billingSpecification: string;
  productZone: string;
  productValidity: string;
  domain: string;
  briefIntroduction: string;
  applicationScenario: string;
  productAdvantages: string;
}

// 模拟数据
const mockDetail: ProductDetail = {
  id: 'PRD001',
  areaCode: '110000',
  userId: 'USER001',
  productName: '城市交通数据产品',
  mainImage: 'https://placeholder.com/400x300',
  price: 999.99,
  orderCount: 156,
  productDescription: '提供实时的城市交通数据，包括路况、车流量等信息。',
  productType: 'structured',
  productCategory: '交通数据',
  industryCategory: '交通运输',
  billingSpecification: '按次计费',
  productZone: '交通专区',
  productValidity: '2024-12-31',
  domain: '智慧交通',
  briefIntroduction: '本产品提供全面的城市交通数据分析服务，帮助用户更好地了解和优化交通状况。',
  applicationScenario: '交通规划、智慧出行、交通管理等场景',
  productAdvantages: '数据实时性强、覆盖范围广、准确度高'
};

const ProductDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  // 实际项目中这里应该调用API获取数据
  const detail = mockDetail;

  return (
    <div className="product-detail-container">
      <Card title="产品详情" className="detail-card">
        <div className="product-header">
          <div className="product-info">
            <h2>{detail.productName}</h2>
            <Tag color="blue">{detail.productType}</Tag>
            <Tag color="green">{detail.industryCategory}</Tag>
          </div>
          {detail.mainImage && (
            <Image
              width={300}
              src={detail.mainImage}
              alt={detail.productName}
              fallback=""
            />
          )}
        </div>

        <Divider />

        <Descriptions title="基本信息" bordered>
          <Descriptions.Item label="产品ID">{detail.id}</Descriptions.Item>
          <Descriptions.Item label="区域码">{detail.areaCode}</Descriptions.Item>
          <Descriptions.Item label="价格">￥{detail.price}</Descriptions.Item>
          <Descriptions.Item label="订单数">{detail.orderCount}</Descriptions.Item>
          <Descriptions.Item label="产品类型">{detail.productType}</Descriptions.Item>
          <Descriptions.Item label="产品分类">{detail.productCategory}</Descriptions.Item>
          <Descriptions.Item label="行业分类">{detail.industryCategory}</Descriptions.Item>
          <Descriptions.Item label="计费规格">{detail.billingSpecification}</Descriptions.Item>
          <Descriptions.Item label="产品专区">{detail.productZone}</Descriptions.Item>
          <Descriptions.Item label="产品有效期">{detail.productValidity}</Descriptions.Item>
          <Descriptions.Item label="所属领域">{detail.domain}</Descriptions.Item>
        </Descriptions>

        <Divider />

        <Card title="产品简介" className="sub-card">
          <p>{detail.briefIntroduction}</p>
        </Card>

        <Card title="产品描述" className="sub-card">
          <p>{detail.productDescription}</p>
        </Card>

        <Card title="应用场景" className="sub-card">
          <p>{detail.applicationScenario}</p>
        </Card>

        <Card title="产品优势" className="sub-card">
          <p>{detail.productAdvantages}</p>
        </Card>
      </Card>
    </div>
  );
};

export default ProductDetail;